<template>
    <div>

        <el-card style="width: 60%" class="allevent">
        <template #header>
            <div class="card-header">
                <span>所有事件</span>
                <el-button @click="$emits('quall')">x</el-button>
            </div>
        </template>
            <el-table :data="eventValue" border  class="allTable" max-height="200">
                <el-table-column fixed label="事件编号" prop='0' width="150" />
                <el-table-column label="事件类型" prop="1" />
                <el-table-column label="事件等级" prop="2" />
                <el-table-column label="发生时间" prop="3" width="150" />
                <el-table-column label="发生地点" prop="4" width="150" />
                <el-table-column label="车牌号" prop="5" />
                <el-table-column label="驾驶员" prop="6" />
                <el-table-column label="处理状态" prop="7" />
            </el-table>
        <template #footer>
            <el-button>热力图</el-button>
            <el-button @click="changepie">饼图</el-button>
        </template>
    </el-card>
    <PieChart v-show="pieShow" :pieValue="pieValue"></PieChart>
    </div>
</template>
<script setup>
import PieChart from '../chart/PieChart.vue'
import {ref} from 'vue'
const $emits = defineEmits(['quall'])
defineProps({
    eventValue: {
                type: Array,
    },
    pieValue :{
        type:Object,
    }
});
const pieShow = ref(false)
const changepie = () => {
    pieShow.value = !pieShow.value
}
</script>
<style scoped>
/* .allTable {
    position: fixed;
    align-items: center;
    z-index: 100;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.allevent {
    position: fixed;
    align-items: center;
    z-index: 100;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 1500px;
} */

.allevent{
    position: fixed;
    bottom: 180px;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
}
</style>